<template>
	<view class="container">
		<view class="avatar-box" @click="afterReadAvatar">
			<u-avatar v-if="formData.avatar" :src="formData.avatar"></u-avatar>
			<u-icon name="camera" color="#fff" size="28"></u-icon>
		</view>

		<view class="info-list">
			<view class="info-cell">
				<view class="cell-label">姓名</view>
				<view class="cell-ipt">
					<u--input :maxlength="5" placeholderClass="plach" placeholder="请输入宠物名字" border="none"
						v-model="formData.name" type="text"></u--input>
				</view>
			</view>
			<view class="info-cell" @click="showPetType = true">
				<view class="cell-label">品种</view>
				<view class="cell-ipt">
					<u--input v-model="formData.typeName" disabled disabledColor="#ffffff" border="none"
						placeholder="请选择品种"></u--input>
				</view>
				<u-icon slot="right" name="arrow-down"></u-icon>
			</view>
			<view class="info-cell" @click="datetimePickershow = true">
				<view class="cell-label">生日</view>
				<view class="cell-ipt">
					<u--input v-model="formData.birthday" disabled disabledColor="#ffffff" border="none"
						placeholder="请选择生日"></u--input>
				</view>
				<u-icon slot="right" name="arrow-down"></u-icon>
			</view>
			<view class="info-cell">
				<view class="cell-label">毛色</view>
				<view class="cell-ipt">
					<u--input v-model="formData.color" border="none" placeholder="请输入毛色"></u--input>
				</view>
			</view>
			<view class="info-cell">
				<view class="cell-label">体重(kg)</view>
				<view class="cell-ipt">
					<u--input type="number" v-model="formData.weight" border="none" placeholder="请输入体重"></u--input>
				</view>
			</view>
			<view class="info-cell" @click="onShowSheet('sex')">
				<view class="cell-label">性别</view>
				<view class="cell-ipt">
					<u--input v-model="formData.sexName" disabled disabledColor="#ffffff" border="none"
						placeholder="请选择性别"></u--input>
				</view>
				<u-icon slot="right" name="arrow-down"></u-icon>
			</view>
			<!-- <view class="info-cell">
				<view class="cell-label">肩高/体长(cm)</view>
				<view class="cell-ipt">
					<u--input v-model="formData.weight" disabled disabledColor="#ffffff" border="none"
						placeholder="请输入肩高/体长"></u--input>
				</view>
			</view> -->
			<view class="info-cell" @click="onShowSheet('steril')">
				<view class="cell-label">是否绝育</view>
				<view class="cell-ipt">
					<u--input v-model="formData.sterilName" disabled disabledColor="#ffffff" border="none"
						placeholder="请选择是否绝育"></u--input>
				</view>
				<u-icon slot="right" name="arrow-down"></u-icon>
			</view>

			<view class="info-cell" style="display: block;width:100%;">
				<view class="cell-label">全身照</view>
				<view class="cell-ipt" style="margin-top: 10px;">
					<u-upload width="98" height="98" :fileList="fileList" @afterRead="afterRead" @delete="deletePic"
						name="1" multiple :maxCount="10"></u-upload>
				</view>
			</view>
		</view>
		<cu-button-wrap>
			<u-button :customStyle="{width:'670rpx',height:'104rpx',borderRadius:'104rpx'}" type="primary" text="保存"
				@click="onSaveInfo"></u-button>
		</cu-button-wrap>
		<!-- 选择类型 -->
		<u-picker keyName="name" :defaultIndex="defaultIndex" @cancel="showPetType = false" :show="showPetType"
			:columns="petTypeList" @confirm="onActionSheetPetType"></u-picker>

		<!-- 选择性别 or 选择是否绝育 -->
		<u-action-sheet @close="showSheet = false" @select="onActionSheet" round="24" cancelText="取消"
			:actions="sheetList" :show="showSheet">
		</u-action-sheet>
		<!-- 年月日 -->
		<u-datetime-picker @confirm="onDateTimeConfirm" @cancel="datetimePickershow = false" ref="datetimePicker"
			:formatter="formatter" :show="datetimePickershow" v-model="formMonthYear" mode="date"></u-datetime-picker>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		components: {},
		computed: {
			...mapState(['isLogin', 'userInfo']),
		},
		data() {
			return {
				showSheetProvinces: false,
				defaultIndex: [0],
				fileList: [], //
				formMonthYear: '', //Number(new Date())
				sheetList: [],
				sheetSexList: [{
						name: '弟弟',
						id: 0,
						color: '#000000',
						fontSize: '17'
					},
					{
						name: '妹妹',
						id: 1,
						color: '#000000',
						fontSize: '17'
					},
					{
						name: '其他',
						id: 2,
						color: '#000000',
						fontSize: '17'
					}
				],
				sheetSterilList: [{
						name: '否',
						id: 0,
						color: '#000000',
						fontSize: '17'
					},
					{
						name: '是',
						id: 1,
						color: '#000000',
						fontSize: '17'
					}
				],
				formData: {
					name: '',
					avatar: '',
					type_id: '',
					typeName: '',
					birthday: '',
					color: '',
					weight: '',
					sex: '', //0弟弟，1妹妹，2其他
					sexName: '',
					sterilName: '',
					is_steril: '', // 是否绝育，0否，1是
					images: '',
				},
				showPetType: false, //宠物品种
				showSheet: false,
				sheetType: '',
				datetimePickershow: false,
				petTypeList: []
			}
		},
		onReady() {
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		onLoad(options) {
			if (options.id) {
				this.getPetInfo(options.id);
			}
			this.get_pet_list_cate();
		},
		methods: {
			onActionSheetPetType(e) {
				this.formData.type = e.value[0].id;
				this.formData.type_id = e.value[0].id;
				this.formData.typeName = e.value[0].name;
				this.showPetType = false;
				console.log('e', e);
			},
			get_pet_list_cate() {
				this.$Net.get(this.$api.pet_list_cate, {}, 0).then(res => {
					this.petTypeList = [res];
				})
			},
			// 新增图片
			async afterReadAvatar(event) {
				let _this = this;
				uni.chooseImage({
					count: 1, // 默认9, 设置图片的选择数量
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: async (res) => {
						console.log(res.tempFilePaths);
						const result = await this.$Net.upload(res.tempFilePaths[0], 1)
						// 返回选定照片的本地文件路径列表 tempFilePaths
						_this.formData.avatar = result.data.url
					},
					fail: (err) => {
						// 处理错误情况
						_this.$Msg.Toast(err)
						console.error(err);
					}
				});
			},
			// 弹窗
			onShowSheet(key) {

				this.sheetType = key;
				if (key == 'sex') {
					this.sheetList = this.sheetSexList;
				} else {
					this.sheetList = this.sheetSterilList;
				}
				this.showSheet = true;
			},
			// 弹窗选择
			onActionSheet(e) {
				this.showSheet = false;
				if (this.sheetType == 'sex') {
					this.formData.sexName = e.name;
					this.formData.sex = e.id;
				} else {
					this.formData.sterilName = e.name;
					this.formData.is_steril = e.id;
				}
			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList`].length
				lists.map((item) => {
					this[`fileList`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.$Net.upload(lists[i].url, 0)
					let item = this[`fileList`][fileListLen]
					this[`fileList`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result.data.url
					}))
					fileListLen++
				}
			},
			// 宠物详情
			getPetInfo(id) {
				this.$Net.get(this.$api.pet_detail + "/" + id, {

				}, 1).then(res => {
					console.log('res', res);
					const {
						name,
						avatar,
						type_id,
						type_id_name,
						birthday,
						color,
						weight,
						sex,
						is_steril,
						images,
						id
					} = res
					this.formData = {
						id,
						name,
						avatar,
						type: type_id,
						type_id: type_id,
						birthday,
						color,
						weight,
						sex,
						is_steril,
						typeName: type_id_name,
						sexName: ['弟弟', '妹妹', '其他'][sex], //0弟弟，1妹妹，2其他
						sterilName: ['否', '是'][is_steril],
					}

					this.fileList = []
					images.split(',').map(item => {
						this.fileList.push({
							status: 'success',
							message: '',
							url: item
						})
					})
				})
			},
			// 保存
			onSaveInfo() {
				console.log('----', this.formData);
				let fileUrls = this.fileList.map(item => {
					return item.url
				})
				this.formData.images = fileUrls.toString();
				console.log(this.formData);
				let url = this.$api.pet_add;
				if (this.formData.id) {
					url = this.$api.pet_edit;
				}
				this.$Net.post(url, this.formData, 1).then(res => {
					this.$Msg.Toast(res.msg)
					uni.$emit('addPet')
					this.$Jump.Back();
					console.log(res);
				})
			},
			// 生日确定
			onDateTimeConfirm(e) {
				this.formData.birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.datetimePickershow = false;
			},
			// 格式化生日
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.avatar-box {
			width: 98px;
			height: 98px;
			border-radius: 98px;
			background: #F1F1F1;
			margin: 40rpx auto 0;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			::v-deep .u-avatar__image,
			::v-deep .u-avatar {
				width: 98px !important;
				height: 98px !important;
				position: relative;
				z-index: 2;
			}

			::v-deep .u-icon {
				position: absolute;
				z-index: 3;
			}

			// overflow: hidden;
		}

		.info-list {
			margin-top: 40rpx;

			.info-cell {
				display: flex;
				align-items: center;
				margin-bottom: 40rpx;

				.cell-label {
					color: rgba(0, 0, 0, 0.60);
					font-family: "PingFang SC";
					font-size: 32rpx;
					font-weight: 400;
					margin-right: 10rpx;
					width: 210rpx;
				}

				::v-deep .u-input {
					padding: 0 !important;
					font-size: 32rpx;
				}

				.cell-ipt {
					font-size: 32rpx;
					flex: 1;
				}

				/deep/ .plach {
					color: rgba(0, 0, 0, 0.40);
					font-size: 32rpx;
				}
			}
		}
	}
</style>